<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:p="http://primefaces.org/ui"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets">

<h:head>
	<meta charset="UTF-8" />
	<title>VAOI || RSS</title>
	<meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport' />

</h:head>

<h:body class="skin-green">
	<ui:composition template="/USER/menuUser.xhtml">
		<ui:define name="body">
			<f:view>

	<!-- Site wrapper -->
	<div  style="min-height:100%">

			

				<div class="modal fade" id="progressBar" tabindex="-1" role="dialog"
					aria-labelledby="myModalLabel" aria-hidden="true">
					<div class="modal-dialog">
						<div class="modal-content">
							<div class="modal-header">

								<h4 class="modal-title" align="center">Cargando</h4>
							</div>
							<div class="modal-body">

								<div class="progress progress-striped active">
									<div class="progress-bar progress-bar-success"
										role="progressbar" aria-valuenow="100" aria-valuemin="0"
										aria-valuemax="100" style="width: 100%"></div>
								</div>

							</div>

						</div>
					</div>
				</div>
				<!-- Barra de Progreso -->

					<!-- Inicio Contenido Principal-->

					<h:form id="form">
						<p:messages id="msg" autoUpdate="true" closable="true"/>

						<div class="ui-grid ui-grid-responsive">
							<div class="ui-grid-row">
								<div class="ui-grid-col-6">
									<div class="panel panel-default">

										<div class="panel-heading" align="center"
											style="font-family: sans-serif; font-size: 150%;">Colecciones</div>

										<div class="panel-body">

											<div align="left">

												<p:scrollPanel style="height:200px; width:auto;"
													mode="native">
													<p:tree id="txtFavorito"
														value="#{rssView.raizFavorito}" var="colecciones"
														selectionMode="single"
														style="margin: 0 auto;width:auto;height:30px"
														selection="#{rssView.seleccionFavorito}">

														<p:treeNode icon="#{colecciones.icono}">
															<h:outputText value="#{colecciones.nombre}" />
														</p:treeNode>
														
													</p:tree>
													<p:tree id="txtColecciones"
														value="#{rssView.raizColecciones}" var="colecciones"
														selectionMode="single"
														style="margin: 0 auto;width:auto;height:168px"
														selection="#{rssView.seleccionColecciones}">

														<p:treeNode icon="#{colecciones.icono}">
															<h:outputText value="#{colecciones.nombre}" />
														</p:treeNode>
														
													</p:tree>
												</p:scrollPanel>

												<p:contextMenu for="txtColecciones">

													<p:menuitem value="Crear RSS" action="#{rssView.crear()}"
														icon="ui-icon-pencil" rendered="#{selectedColeccion.nombre ne 'ui-icon-folder-collapsed'}"
														onclick="$('#dlgRSS').modal('show');"
														update=":formDlg:txtURLC, :formDlg:messages" />
													
													<p:menuitem value="Ver" action="#{rssView.onNodeSelectColeccion}"
														icon="ui-icon-search" onclick="$('#progressBar').modal('show');"
														oncomplete="$('#progressBar').modal('hide');" update=":form:txtRSS"/>

												</p:contextMenu>
												
												<p:contextMenu for="txtFavorito">
													
													<p:menuitem value="Ver" action="#{rssView.onNodeSelectFavorito}"
														icon="ui-icon-search" ajax="false" onclick="$('#progressBar').modal('show');"/>

												</p:contextMenu>

											</div>

										</div>

									</div>
								</div>
								<div class="ui-grid-col-6">
									<div class="panel panel-default">

										<div class="panel-heading" align="center"
											style="font-family: sans-serif; font-size: 150%;">RSS</div>

										<div class="panel-body">

											<div align="left">

												<p:scrollPanel mode="native"
													style="height:200px; width:auto;">
													<p:tree id="txtRSS" value="#{rssView.raizRss}" var="rss"
														selectionMode="single"
														style="margin: 0 auto;width:auto;height:198px"
														selection="#{rssView.seleccionRss}">

														<p:treeNode icon="ui-icon-signal-diag">
															<h:outputText value="#{rss.url}" />
														</p:treeNode>

													</p:tree>
												</p:scrollPanel>

												<p:contextMenu for="txtRSS">

													<p:menuitem value="Modificar RSS"
														action="#{rssView.modificar()}" icon="ui-icon-pencil"
														onclick="$('#dlgModificar').modal('show');"
														update=":formDlg2:txtURL, :formDlg2:messages" />

													<p:menuitem value="Ver Entradas RSS" icon="ui-icon-search"
														 action="#{rssView.cargar_Feed}" ajax="false"
														 onclick="$('#progressBar').modal('show');" /> 
														 														 
													<p:menuitem value="Eliminar RSS"
														action="#{rssView.action_delete}" icon="ui-icon-trash"
														update="form:txtRSS" />

												</p:contextMenu>

											</div>

										</div>

									</div>
								</div>
							</div>

						</div>

						<div class="panel panel-default" style="height: 480px">

							<div class="panel-heading" align="center"
								style="font-family: sans-serif; font-size: 150%;">Entradas</div>

							<div class="panel-body">

								<p:scrollPanel style="height:400px" mode="native">
									
									<p:dataList value="#{rssView.listaEntradas}" var="entrada"
										type="unordered" itemType="none"  rendered="#{not empty rssView.listaEntradas}"
										styleClass="paginated" id="idFeed">								
									
											<h:outputText value="#{entrada.titulo}"
												style="font-weight: bold;display:block" />
											<h:outputText value="#{entrada.descripcion}" escape="false"/>
											<br/>
											
											<div align="center">

											<div style="display: inline-block;">
												<table>
													<tr>
														<th>
															<div align="center"
																style="display: inline-block; min-width: 85px; width: 85px; min-height: 100px; height: 100px; padding: 30px 0 0 0;">	
																																
                                                                 <p:commandLink value="Leer.." style="font-weight: bold; color:green;" target="_blank"
									                                  class="btn btn-default fa fa-external-link" action="#{rssView.leer(entrada)}" title="#{entrada.enlace}" 
									                                   onclick="window.open(this.title)"/>	
									                                  
															</div>
														</th>
														<th>
															<div align="center"
																style="display: inline-block; min-width: 80px; width: 80px; min-height: 100px; height: 100px; padding: 2px;">
																<!-- Boton me gusta y compartir Facebook-->
																<div class="fb-like" data-href="#{entrada.enlace}"
																	data-layout="box_count" data-action="like"
																	data-show-faces="true" data-share="true"></div>
															</div>
														</th>
													</tr>

												</table>
											</div>

											<div style="display: inline-block;">
												<table>
													<tr>
														<th>
															<div align="center"
																style="display: inline-block; min-width: 90px; width: 90px; min-height: 100px; height: 100px;">
																<!-- Boton me gusta Google+ -->
																<div align="center" class="g-plusone"
																	data-href="#{entrada.enlace}" data-size="tall"></div>
																<!-- Boton compartir google+ -->
																<div class="g-plus" data-action="share"
																	data-annotation="none" data-height="24"
																	data-href="#{entrada.enlace}" />
															</div>
														</th>
														<th>
															<div align="center"
																style="display: inline-block; min-width: 85px; width: 85px; min-height: 100px; height: 100px; padding: 30px 0 0 0;">
																<div>
									                             
									                             <p:commandLink value=" Favorito" style="font-weight: bold; color:orange;" class="btn btn-default fa fa-star" action="#{rssView.guardarFavorito(entrada.enlace)}"/>										    	 

																</div>
															</div>
														</th>

													</tr>

												</table>
											</div>
										</div>
																																				
									<p:separator />

									</p:dataList>

									<p:dataList value="#{rssView.favoritos}" var="favorito"
										type="unordered" itemType="none" rendered="#{not empty rssView.favoritos}"
										styleClass="paginated" id="favori" >
										<f:facet name="header">
                                           Favoritos
                                        </f:facet>										
									
											<h:outputText value="#{favorito.titulo}"
												style="font-weight: bold;display:block" />
											<h:outputText value="#{favorito.descripcion}" escape="false"/>
											<br/>
											
											<div align="center">

											<div style="display: inline-block;">
												<table>
													<tr>
														<th>
															<div align="center"
																style="display: inline-block; min-width: 85px; width: 85px; min-height: 100px; height: 100px; padding: 30px 0 0 0;">
																
																<p:commandLink value="Leer.." style="font-weight: bold; color:green;" target="_blank"
									                                  class="btn btn-default fa fa-external-link" action="#{rssView.leer(favorito)}" title="#{favorito.enlace}" 
									                                   onclick="window.open(this.title)"/>																																															    	 

															</div>
														</th>
														<th>
															<div align="center"
																style="display: inline-block; min-width: 80px; width: 80px; min-height: 100px; height: 100px; padding: 2px;">
																<!-- Boton me gusta y compartir Facebook-->
																<div class="fb-like" data-href="#{favorito.enlace}"
																	data-layout="box_count" data-action="like"
																	data-show-faces="true" data-share="true"></div>
															</div>
														</th>
													</tr>

												</table>
											</div>

											<div style="display: inline-block;">
												<table>
													<tr>
														<th>
															<div align="center"
																style="display: inline-block; min-width: 90px; width: 90px; min-height: 100px; height: 100px;">
																<!-- Boton me gusta Google+ -->
																<div align="center" class="g-plusone"
																	data-href="#{favorito.enlace}" data-size="tall"></div>
																<!-- Boton compartir google+ -->
																<div class="g-plus" data-action="share"
																	data-annotation="none" data-height="24"
																	data-href="#{favorito.enlace}" />
															</div>
														</th>
														<th>
															<div align="center"
																style="display: inline-block; min-width: 85px; width: 85px; min-height: 100px; height: 100px; padding: 30px 0 0 0;">
																<div>
									                             
									                             <p:commandLink value=" Eliminar" style="font-weight: bold; color:red;" ajax="false"
									                             class="btn btn-default fa fa-star" action="#{rssView.eliminarFavorito(favorito.codigoEntrada)}"/>										    	 

																</div>
															</div>
														</th>

													</tr>

												</table>
											</div>
										</div>																		
									<p:separator />

									</p:dataList>

								</p:scrollPanel>

							</div>

						</div>

						<div id="fb-root" />

					</h:form>
					<!-- Fin Contenido Principal-->

					<!-- Inicio Dialogo Crear RSS-->
					<h:form id="formDlg">

						<div class="modal fade" id="dlgRSS" tabindex="-1" role="dialog"
							aria-labelledby="myModalLabel" aria-hidden="true">
							<div class="modal-dialog">
								<div class="modal-content">
									<div class="modal-header">

										<h4 class="modal-title" align="center">Crear RSS</h4>
									</div>
									<div class="modal-body">

										<p:messages id="messages" autoUpdate="false" closable="true" />

										<p:outputLabel value="URL Rss:" />
										<p:inputText id="txtURLC" binding="#{rssView.txtUrl}"
											class="form-control" />

										<p:spacer height="10px" />

										<div align="center">

											<p:commandButton value="Crear" class="btn btn-primary"
												action="#{rssView.action_create()}"
												update=":form:txtRSS, :form:txtColecciones" />
											<p:commandButton value="Cerrar" class="btn btn-danger"
												onclick="$('#dlgRSS').modal('hide');" />
										</div>

									</div>

								</div>
							</div>
						</div>
					</h:form>
					<!-- Fin Dialogo Crear RSS-->

					<!-- Inicio Dialogo Modificar RSS-->
					<h:form id="formDlg2">

						<div class="modal fade" id="dlgModificar" tabindex="-1"
							role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
							<div class="modal-dialog">
								<div class="modal-content">
									<div class="modal-header">

										<h4 class="modal-title" align="center">Modificar RSS</h4>
									</div>
									<div class="modal-body" id="panelModificar">

										<p:messages id="messages" autoUpdate="false" closable="true" />

										<p:outputLabel value="URL Rss:" />
										<p:inputText id="txtURL" binding="#{rssView.txtUrlModificar}"
											class="form-control" />

										<p:spacer height="10px" />

										<div align="center">

											<p:commandButton value="Modificar" class="btn btn-primary"
												action="#{rssView.action_modify}"
												update=":form:txtRSS, :form:txtColecciones" />

											<p:commandButton value="Cerrar" class="btn btn-danger"
												onclick="$('#dlgModificar').modal('hide');" />

										</div>

									</div>

								</div>
							</div>
						</div>
					</h:form>
					<!-- Fin Dialogo Modificar -->


		</div>
	<!-- ./wrapper -->

	<script type="text/javascript">
		window.___gcfg = {
			lang : 'es-	es'
		};

		(function() {
			var po = document.createElement('script');
			po.type = 'text/javascript';
			po.async = true;
			po.src = '../js/plusone.js';
			var s = document.getElementsByTagName('script')[0];
			s.parentNode.insertBefore(po, s);
		})();
	</script>


	<script>
		window.fbAsyncInit = function() {
			FB.init({
				appId : '356963437842660',
				status : true,
				cookie : true,
				xfbml : true
			});
		};

		// Load the SDK Asynchronously   
		(function(d) {
			var js, id = 'facebook-jssdk', ref = d
					.getElementsByTagName('script')[0];
			if (d.getElementById(id)) {
				return;
			}
			js = d.createElement('script');
			js.id = id;
			js.async = true;
			js.src = "../js/all.js";
			ref.parentNode.insertBefore(js, ref);
		}(document));
	</script>
			</f:view>
		</ui:define>
	</ui:composition>

</h:body>

</html>
